<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .cardTitle {
            height: 40px;
            line-height: 40px;
            color: rgb(75, 145, 225);
            border-left: 5px solid rgb(75, 145, 225);
            margin: 15px 0;
            padding-left: 10px;
        }

        .baseInfo {
            width: 100%;
            height: 200px;
        }

        .carInfo {
            width: 100%;
            height: 150px;
        }

        .InfoItem {
            display: inline-block;
            width: 350px;
            height: 50px;
            line-height: 50px;
        }

        .attachInfo a {
            color: rgb(0, 80, 192);
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div class="layuimini-container" style="padding: 20px;">
        <div class="baseInfo">
            <p class="cardTitle">基本信息</p>
            <span class="InfoItem">磅单编号：<span id="plio">FHD-RC20220205-001</span></span>
            <span class="InfoItem">客户名称：旭辉投资公司</span>
            <span class="InfoItem">项目名称：<span id="pname">旭辉运河悦章</span></span>
            <br>
            <span class="InfoItem">发货时间：<span id="time1">2022-02-05 13:00:00</span></span>
            <span class="InfoItem">签收时间：<span id="time2">2022-02-07 16:00:00</span></span>
            <span class="InfoItem">磅单状态：<span id="status">已签收</span></span>
            <br>
            <span class="InfoItem" style="width: 100%;">收料信息：浙江省杭州市西湖区联合大厦B座；张三，13157188735</span>
        </div>
        <div class="carInfo">
            <p class="cardTitle">车辆信息</p>
            <span class="InfoItem">车牌号：<span id="car">浙AY815D</span></span>
            <span class="InfoItem">司机：<span id="drivername">赵四</span></span>
            <span class="InfoItem">联系电话：<span id="driverphone">13821459876</span></span>
            <br>
            <span class="InfoItem">到达时间：<span id="time3">2022-02-07 14:30:00</span></span>
        </div>
        <div class="materialInfo">
            <p class="cardTitle">商品信息</p>
            <div class="layui-tab-item layui-show" style="width: 902px;">
                <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            </div>
            <div class="layui-tab-item layui-show" style="width: 452px;" id="addition">
                <table class="layui-hide" id="currentTableId2" lay-filter="currentTableFilter"></table>
            </div>
        </div>
        <div class="attachInfo">
            <p class="cardTitle">附件信息</p>
            <a href="">质检报告.pdf</a>
            <a href="" style="margin-left: 30px;">在线签名.jpg</a>
        </div>
    </div>

    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <style type="text/css">
        .layui-table-cell {
            height: auto !important;
            white-space: normal;
        }
    </style>
    <script type="text/html" id="Tpl">
        <div>
            <img src="{{d.mimg}}" alt="" style="margin-right: 25px;width: 100px;">
            <span style="line-height: 150px;">{{d.mname}}</span>
        </div>
    </script>
    <script>
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table;
            var url = window.location.href;
            var mid = url.split('=')[1];
            var data = {
                mid: mid,
                mode: '3'
            }
            $('body').ready(function () {
                if (mid == '7' || mid == '9')
                    $('#addition').removeClass('layui-show');
                $.get('/pl', data, function (re) {
                    $('#plio').text(re.plio);
                    $('#pname').text(re.pname);
                    $('#status').text(re.status);
                    $('#time1').text(re.time1);
                    $('#time2').text(re.time2);
                    $('#time3').text(re.time3);
                    $('#car').text(re.car);
                    $('#drivername').text(re.drivername);
                    $('#driverphone').text(re.driverphone);
                })
            })
            table.render({
                elem: '#currentTableId',
                url: '/pl',
                method: 'get',
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.count, //解析表格数据总条数 eg:共100页              
                        "data": res.data //解析table表格数据源
                    };
                },
                where: {
                    "mid": mid,
                    "mode": '2'
                }, //where用来传递请求时额外的参数 eg:productName
                cols: [
                    [{
                            field: 'mname',
                            width: 300,
                            title: '货物名称',
                            style: 'height:160px;line-height:160px',
                            templet: '#Tpl'
                        },
                        {
                            field: 'mtype',
                            width: 150,
                            title: '型号',
                            align: "center",
                            sort: true
                        },
                        {
                            field: 'weight1',
                            width: 150,
                            title: '毛重（吨）',
                            align: "center",
                            sort: true
                        },
                        {
                            field: 'weight2',
                            width: 150,
                            title: '皮重（吨）',
                            align: "center",
                            sort: true
                        },
                        {
                            field: 'weight3',
                            width: 150,
                            title: '净重（吨）',
                            align: "center",
                            sort: true
                        },
                    ]
                ],
                skin: 'line'
            });
            table.render({
                elem: '#currentTableId2',
                url: '../api/table.json',
                cols: [
                    [{
                            field: 'aname',
                            width: 150,
                            title: '附属商品名称',
                            templet: '<div><img src="{{d.aimg}}" style="margin-right:20px">{{d.aname}}</div>'
                        }, {
                            field: 'atype',
                            width: 150,
                            title: '规格',
                            align: "center",
                            sort: true
                        },

                        {
                            field: 'anum',
                            width: 150,
                            title: '数量',
                            align: "center"
                        }
                    ]
                ],
                skin: 'line'
            });
            table.on('tool(currentTableFilter)', function (obj) {
                if (obj.event === 'show1') {
                    var mid = obj.data.mid;
                    alert(mid);
                }
            });
            form.on('submit(data-search-btn)', function (data) {
                var result = JSON.stringify(data.field);
                layer.alert(result, {
                    title: '最终的搜索信息'
                });
            });

        });
    </script>

</body>

</html>